<template>
    <div v-if="false">
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        <div v-if="verify">
            <div class="box">
                <h2>安全验证</h2>
                <p>填写当前登录密码，验证本人身份</p>
            </div>
            <div>
                <van-field v-model="value" label="登录密码" placeholder="请输入密码" />
            </div>
            <div>
                <van-button :disabled="!btn" :class="[!btn? 'gray' : 'green']" @click="yz">
                    验证
                </van-button>
            </div>
            <van-popup v-model="show" overlay>
                <van-icon name="success" />
                <p>已验证</p>
            </van-popup>
        </div>

        <div v-else-if="!verify">
            <div class="box">
                <h2>填写新的账号</h2>
                <p>建议避免包含姓名、生日等涉及个人隐私信息</p>
            </div>
            <div>
                <van-field v-model="nickname" label="账号" placeholder="请输入账号" />
            </div>
            <div>
                <van-button :disabled="!btn" :class="[!btn? 'gray' : 'green']" @click="alter">
                    确定
                </van-button>
            </div>
        </div>

    </div>

</template>
<script>
export default {
    data() {
        return {
            show: false,
            value: "",
            btn: false,
            verify: true,
            nickname: ""
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        async yz() {
            console.log(this.value);
            let rst = await this.$frontaxios.post(this.$front.postPassword, { password: this.value })
            if (rst.code == 1) {
                this.show = true
                this.verify = false
            } else {
                this.$notify({ type: 'warning', message: '账号或密码错误，请重新填写' });
            }
        },
        async alter() {
            let rst = await this.$frontaxios.post(this.$front.postNickname, {nickname:this.nickname})
            if (rst.code == 1) {
                this.$notify({ type: 'success', message: '修改成功' })
                settimeout(() => {
                    this.$router.push({ name: 'my' })
                }, 1000)
            }
        }
    },
    watch: {
        'value': function (newval, odlval) {
            if (newval == false) {
                this.btn = false
            } else {
                this.btn = true
            }
        }
    }
}
</script>
<style scoped>
.box {
    margin: 1rem;
    height: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.gray {
    background-color: #F2F2F2;
}

.green {
    background-color: #07C160;
    color: #FFF;

}

.van-button {
    width: 8rem;
    border-radius: 0.5rem;
    position: fixed;
    bottom: 5rem;
    left: 35%;
}

.van-popup {
    width: 7rem;
    height: 7rem;
    background-color: black;
    color: #FFF;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.van-icon {
    font-size: 2rem;
}
</style>
